<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid blueviolet;"></canvas>
		<input type="button" id="clear" value="清空canvas"/>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas");
			var cxt = canvas.getContext("2d");
			canvas.width = 550;
			canvas.height = 400;

			function clear() {
				cxt.clearRect(0, 0,canvas.width, canvas.height)
			}

			window.onload = function() {
				cxt.fillRect(50, 50, 80, 80)

			}
		</script>
	</body>

</html>